<template>
  <div class="app-container" style="padding: 5px;">
    <el-row>
        <el-col :span="8">
            <el-card style="height:110px;">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">会员总数</span></center>
                </div>
                <center><i class="el-icon-s-custom" style="color:orange;font-size: 25px;"></i> <span style="font-weight: bold;font-size: 35px;color:red">{{ cusSummary.hyzs }}</span></center>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height:110px;margin-left: 5px;">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">V+ 总数</span></center>
                </div>
                <center><i class="el-icon-s-custom" style="color:orange;font-size: 25px;"></i> <span style="font-weight: bold;font-size: 35px;color:red">{{ cusSummary.vjzs }}</span></center>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height:110px;margin-left: 5px;">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">V0总数</span></center>
                </div>
                <center><i class="el-icon-s-custom" style="color:orange;font-size: 25px;"></i> <span style="font-weight: bold;font-size: 35px;color:red">{{ cusSummary.vlzs }}</span></center>
            </el-card>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="8">
            <el-card style="height:110px; margin-top: 5px;">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">一般客户总数</span></center>
                </div>
                <center><i class="el-icon-s-custom" style="color:orange;font-size: 25px;"></i> <span style="font-weight: bold;font-size: 35px;">{{ cusSummary.ybkhzs }}</span></center>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height:110px;margin-left: 5px; margin-top: 5px">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">本月跟进人数</span></center>
                </div>
                <center><i class="el-icon-s-custom" style="color:orange;font-size: 25px;"></i> <span style="font-weight: bold;font-size: 35px;">{{ cusSummary.bygjrs }}</span></center>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height:110px;margin-left: 5px; margin-top: 5px">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">当月新增客户数</span></center>
                </div>
                <center><i class="el-icon-s-custom" style="color:orange;font-size: 25px;"></i> <span style="font-weight: bold;font-size: 35px;">{{ cusSummary.dyxzrs }}</span></center>
            </el-card>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="8">
            <el-card style="height:110px; margin-top: 5px;">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">当月下单客户数</span></center>
                </div>
                <center><i class="el-icon-s-custom" style="color:orange;font-size: 25px;"></i> <span style="font-weight: bold;font-size: 35px;color: green;">{{ cusSummary.dyxdkhs }}</span></center>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height:110px;margin-left: 5px; margin-top: 5px">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">当月下单一次客户数</span></center>
                </div>
                <center><i class="el-icon-s-custom" style="color:orange;font-size: 25px;"></i> <span style="font-weight: bold;font-size: 35px;color: green;">{{ cusSummary.dyxdyckhs }}</span></center>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height:110px;margin-left: 5px; margin-top: 5px">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">当月复购客户数</span></center>
                </div>
                <center><i class="el-icon-s-custom" style="color:orange;font-size: 25px;"></i> <span style="font-weight: bold;font-size: 35px;color: green;">{{ cusSummary.dyfgkhs }}</span></center>
            </el-card>
        </el-col>
    </el-row>

    <el-card style="margin-top: 5px;height: 60px;">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="110px" label-position="left">
            <el-form-item label="筛选片区" prop="statu">
                <el-select v-model="queryParams.area" style="width: 250px;" filterable @change="changeArea">
                    <el-option
                        v-for="item in areaListOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="筛选年份" prop="statu">
                <el-select v-model="queryParams.adtime" style="width: 250px;" filterable @change="changeYear">
                    <el-option
                        v-for="item in yearsList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>

    <el-row>
        <el-col :span="16">
            <el-card style="margin-top: 5px;height: 450px;">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">各年客户同比增长情况</span></center>
                </div>
                <el-table :data="khList" border stripe height="383">
                    <el-table-column label="客户类型" align="center" prop="kh_calss" ></el-table-column>
                    <el-table-column label="2020年" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.y2020 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="2021年" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.y2021 }}</span><br />
                            <span v-if="scope.row.yrate2021>0" style="color:red;">{{ Number(scope.row.yrate2021).toFixed(2) }}%</span>
                            <span v-if="scope.row.yrate2021<0" style="color:green;">{{ Number(scope.row.yrate2021).toFixed(2) }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="2022年" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.y2022 }}</span><br />
                            <span v-if="scope.row.yrate2022>0" style="color:red;">{{ Number(scope.row.yrate2022).toFixed(2) }}%</span>
                            <span v-if="scope.row.yrate2022<0" style="color:green;">{{ Number(scope.row.yrate2022).toFixed(2) }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="2023年" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.y2023 }}</span><br />
                            <span v-if="scope.row.yrate2023>0" style="color:red;">{{ Number(scope.row.yrate2023).toFixed(2) }}%</span>
                            <span v-if="scope.row.yrate2023<0" style="color:green;">{{ Number(scope.row.yrate2023).toFixed(2) }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="2024年" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.y2024 }}</span><br />
                            <span v-if="scope.row.yrate2024>0" style="color:red;">{{ Number(scope.row.yrate2024).toFixed(2) }}%</span>
                            <span v-if="scope.row.yrate2024<0" style="color:green;">{{ Number(scope.row.yrate2024).toFixed(2) }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="2025年" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.y2025 }}</span><br />
                            <span v-if="scope.row.yrate2025>0" style="color:red;">{{ Number(scope.row.yrate2025).toFixed(2) }}%</span>
                            <span v-if="scope.row.yrate2025<0" style="color:green;">{{ Number(scope.row.yrate2025).toFixed(2) }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="总和" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.sum }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="margin-top: 5px;height: 450px;">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">客户类型占比</span></center>
                </div>
                <div ref="chart1" style="width: 100%; height: 380px;"></div>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="16">
            <el-card style="margin-top: 5px;height:450px;">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">各年片区客户同比增长情况</span></center>
                </div>
                <el-table :data="areaList" border stripe height="400">
                    <el-table-column label="片区" align="center" prop="area" ></el-table-column>
                    <el-table-column label="2020年" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.y2020 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="2021年" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.y2021 }}</span><br />
                            <span v-if="scope.row.yrate2021>0" style="color:red;">{{ Number(scope.row.yrate2021).toFixed(2) }}%</span>
                            <span v-if="scope.row.yrate2021<0" style="color:green;">{{ Number(scope.row.yrate2021).toFixed(2) }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="2022年" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.y2022 }}</span><br />
                            <span v-if="scope.row.yrate2022>0" style="color:red;">{{ Number(scope.row.yrate2022).toFixed(2) }}%</span>
                            <span v-if="scope.row.yrate2022<0" style="color:green;">{{ Number(scope.row.yrate2022).toFixed(2) }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="2023年" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.y2023 }}</span><br />
                            <span v-if="scope.row.yrate2023>0" style="color:red;">{{ Number(scope.row.yrate2023).toFixed(2) }}%</span>
                            <span v-if="scope.row.yrate2023<0" style="color:green;">{{ Number(scope.row.yrate2023).toFixed(2) }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="2024年" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.y2024 }}</span><br />
                            <span v-if="scope.row.yrate2024>0" style="color:red;">{{ Number(scope.row.yrate2024).toFixed(2) }}%</span>
                            <span v-if="scope.row.yrate2024<0" style="color:green;">{{ Number(scope.row.yrate2024).toFixed(2) }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="2025年" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.y2025 }}</span><br />
                            <span v-if="scope.row.yrate2025>0" style="color:red;">{{ Number(scope.row.yrate2025).toFixed(2) }}%</span>
                            <span v-if="scope.row.yrate2025<0" style="color:green;">{{ Number(scope.row.yrate2025).toFixed(2) }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="总和" align="center">
                        <template slot-scope="scope">
                            <span style="font-weight: bold;font-size: 16px;">{{ scope.row.sum }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="margin-top: 5px;height: 450px;">
                <div slot="header" class="clearfix">
                    <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">客户片区占比 </span></center>
                </div>
                <div ref="chart2" style="width: 100%; height: 380px;"></div>
            </el-card>
        </el-col>
    </el-row>

    <el-card style="margin-top: 5px;height: 860px;">
        <div slot="header" class="clearfix">
            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">各周客户新增数据</span></center>
        </div>
        <div ref="chart3" style="width: 100%; height: 200px;"></div>
        <div ref="chart4" style="width: 100%; height: 200px;"></div>
        <div ref="chart5" style="width: 100%; height: 200px;"></div>
        <div ref="chart6" style="width: 100%; height: 200px;"></div>
    </el-card>

    <el-card style="margin-top: 5px;">
        <div slot="header" class="clearfix">
            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">上周新增客户明细</span></center>
        </div>
        <el-table :data="cDetailList" border stripe :span-method="rowSpanMethod">
            <el-table-column label="年周" align="center" prop="week" ></el-table-column>
            <el-table-column label="会员等级" align="center" prop="vip_rank" ></el-table-column>
            <el-table-column label="客户类型" align="center" prop="kh_calss" ></el-table-column>
            <el-table-column label="对接销售" align="center" prop="data_user_name" ></el-table-column>
            <el-table-column label="客户姓名" align="center" prop="kh_name" ></el-table-column>
            <el-table-column label="是否下单" align="center" prop="first_xd" >
                <template slot-scope="scope">
                    <span v-if="scope.row.first_xd!='Null'&&scope.row.first_xd!=null">是</span>
                    <span v-if="scope.row.first_xd=='Null'||scope.row.first_xd==null">否</span>
                </template>
            </el-table-column>
            <el-table-column label="城市" align="center" prop="kh_city" ></el-table-column>
        </el-table>
    </el-card>

    <el-row>
        <el-col :span="8">
            <el-card style="margin-top: 5px;">
                <div ref="chart7" style="width: 100%; height: 400px;"></div>
            </el-card>
        </el-col>
        <el-col :span="16">
            <el-card style="margin-top: 5px;margin-left: 5px;">
                <div ref="chart8" style="width: 100%; height: 400px;"></div>
            </el-card>
        </el-col>
    </el-row>
    <el-card style="margin-top: 5px;">
        <div slot="header" class="clearfix" style="margin-top: 10px;">
            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">{{ queryParams.adtime }}年-部门下单/月活/复购率 </span></center>
        </div>
        <div id="chart9"></div>

        <div slot="header" class="clearfix" style="margin-top: 10px;">
            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">{{ queryParams.adtime }}年-片区下单/月活/复购率 </span></center>
        </div>
        <div id="chart10"></div>
    </el-card>
    <el-card style="margin-top: 5px;">
        <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">留存率</span>
        </div>
        <el-table :data="lclvList" border stripe :span-method="rowSpanMethodlclv" height="400">
            <el-table-column label="片区" align="center" prop="area" width="80"></el-table-column>
            <el-table-column label="销售人员" align="center" prop="owner" width="100"></el-table-column>
            <el-table-column label="2024下单数" align="center" prop="xds2024" width="100"></el-table-column>
            <el-table-column label="2025下单数" align="center" prop="xds2025" width="100"></el-table-column>
            <el-table-column label="23&24下单数" align="center" prop="xds2324" width="100"></el-table-column>
            <el-table-column label="24&25下单数" align="center" prop="xds2425" width="100"></el-table-column>
            <el-table-column label="24&25下单数" align="center" prop="xds2425" width="100"></el-table-column>
            <el-table-column label="2022留存率" align="center" prop="lclv2022" width="100">
                <template slot-scope="scope">
                    <span style="color:blue;">{{ scope.row.lclv2022 }}%</span>
                </template>
            </el-table-column>
            <el-table-column label="2023留存率" align="center" prop="lclv2023" width="100">
                <template slot-scope="scope">
                    <span style="color:blue;">{{ scope.row.lclv2023 }}%</span>
                </template>
            </el-table-column>
            <el-table-column label="2024留存率" align="center" prop="lclv2024" width="100">
                <template slot-scope="scope">
                    <span style="color:blue;">{{ scope.row.lclv2024 }}%</span>
                </template>
            </el-table-column>
            <el-table-column label="2025留存率" align="center" prop="lclv2025" width="100">
                <template slot-scope="scope">
                    <span style="color:red;">{{ scope.row.lclv2025 }}%</span>
                </template>
            </el-table-column>
            <el-table-column label="">
                <template slot-scope="scope">
                    <div :id="'div' + scope.$index" style="width: 100%; height: 30px;z-index: 10000;"></div>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-card style="margin-top: 5px;">
        <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">留存明细</span>
        </div>
        <el-table :data="lcmxList" border stripe :span-method="rowSpanMethodlcmx">
            <el-table-column label="片区名称" align="center" prop="area" width="80"></el-table-column>
            <el-table-column label="销售人员" align="center" prop="saleman" width="80"></el-table-column>
            <el-table-column label="客户姓名" align="center" prop="customer" width="80"></el-table-column>
            <el-table-column label="2020最晚下单" align="center" prop="zwxd2020"></el-table-column>
            <el-table-column label="2021最晚下单" align="center" prop="zwxd2021"></el-table-column>
            <el-table-column label="2022最晚下单" align="center" prop="zwxd2022"></el-table-column>
            <el-table-column label="2023最晚下单" align="center" prop="zwxd2023"></el-table-column>
            <el-table-column label="2024最晚下单" align="center" prop="zwxd2024"></el-table-column>
            <el-table-column label="2025最晚下单" align="center" prop="zwxd2025"></el-table-column>
            <el-table-column label="留存天数" align="center" prop="lcts"></el-table-column>
        </el-table>
        <center>
            <el-button title="上一页" circle plain type="primary" style="margin-top: 5px;" :disabled="lcmxList.length==0||queryParams1.pageNo==1" @click="showPre1"> << </el-button>
            <el-button title="下一页" circle plain type="primary" style="margin-top: 5px;margin-left: 10px;" :disabled="queryParams1.pageNo>=queryParams1.totalPage" @click="showNext1"> >> </el-button>
        </center>
    </el-card>
    <el-card style="margin-top: 5px;">
        <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">唤醒明细</span>
        </div>
        <el-table :data="hxmxList" border stripe :span-method="rowSpanMethodhxmx">
            <el-table-column label="片区名称" align="center" prop="area" width="80"></el-table-column>
            <el-table-column label="销售人员" align="center" prop="saleman" width="80"></el-table-column>
            <el-table-column label="客户姓名" align="center" prop="customer" width="80"></el-table-column>
            <el-table-column label="2020最晚下单" align="center" prop="zwxd2020"></el-table-column>
            <el-table-column label="2021最晚下单" align="center" prop="zwxd2021"></el-table-column>
            <el-table-column label="2022最晚下单" align="center" prop="zwxd2022"></el-table-column>
            <el-table-column label="2023最晚下单" align="center" prop="zwxd2023"></el-table-column>
            <el-table-column label="2024最晚下单" align="center" prop="zwxd2024"></el-table-column>
            <el-table-column label="2025最晚下单" align="center" prop="zwxd2025"></el-table-column>
            <el-table-column label="留存天数" align="center" prop="lcts"></el-table-column>
        </el-table>
        <center>
            <el-button title="上一页" circle plain type="primary" style="margin-top: 5px;" :disabled="lcmxList.length==0||queryParams2.pageNo==1" @click="showPre2"> << </el-button>
            <el-button title="下一页" circle plain type="primary" style="margin-top: 5px;margin-left: 10px;" :disabled="queryParams2.pageNo>=queryParams2.totalPage" @click="showNext2"> >> </el-button>
        </center>
    </el-card>
  </div>
</template>

<script>
import { listCustomerSummary,listWeekCustomerDicts,listIncreaseSummary,listWeekIncreaseSummary,listLastWeekCustomers,listFgBigDeptAndArea } from "@/api/system/weekly/weeklydashboard";
import { listFgMonthBigDeptAndArea,listFgMonthAreaSummary,listLchxSummary,listLcmxSummary,listHxmxSummary } from "@/api/system/weekly/weeklydashboard";
import { listKhListSummary,listAreaListSummary,listAreaSummaryData } from "@/api/system/weekly/weeklydashboard";

import * as echarts from 'echarts';

export default {
    name: "Crmkhkb",
    data() {
        return {
            areaListOption: [],
            yearsList: [],
            cusSummary: {
                hyzs: 0,
                ybkhzs: 0,
                vjzs: 0,
                vlzs: 0,
                bygjrs: 0,
                dyxzrs: 0,
                dyxdkhs: 0,
                dyxdyckhs: 0,
                dyfgkhs: 0
            },
            queryParams: {
                area: null,
                adtime: null,
            },
            queryParams1: {
                area: null,
                adtime: null,
                pageNo:1,
                pageSize:10,
                totalPage:0
            },
            queryParams2: {
                area: null,
                adtime: null,
                pageNo:1,
                pageSize:10,
                totalPage:0
            },
            khList: [],
            areaList: [],
            areaSummaryList: [],
            khSummaryList: [],
            cDetailList: [],
            lclvList: [],
            lcmxList: [],
            hxmxList: [],
        }
    },
    created() {
        this.getCustomerDicts();
    },
    mounted(){

    },
    methods: {
        rowSpanMethodhxmx({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex === 0 || this.hxmxList[rowIndex - 1].area !== row.area) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.hxmxList.length && this.hxmxList[rowIndex + rowspan].area === row.area) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
            if (columnIndex === 1) {
                if (rowIndex === 0 || this.hxmxList[rowIndex - 1].saleman !== row.saleman) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.hxmxList.length && this.hxmxList[rowIndex + rowspan].saleman === row.saleman) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
        },
        rowSpanMethodlcmx({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex === 0 || this.lcmxList[rowIndex - 1].area !== row.area) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.lcmxList.length && this.lcmxList[rowIndex + rowspan].area === row.area) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
            if (columnIndex === 1) {
                if (rowIndex === 0 || this.lcmxList[rowIndex - 1].saleman !== row.saleman) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.lcmxList.length && this.lcmxList[rowIndex + rowspan].saleman === row.saleman) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
        },
        rowSpanMethodlclv({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex === 0 || this.lclvList[rowIndex - 1].area !== row.area) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.lclvList.length && this.lclvList[rowIndex + rowspan].area === row.area) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
        },
        rowSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex === 0 || this.cDetailList[rowIndex - 1].week !== row.week) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.cDetailList.length && this.cDetailList[rowIndex + rowspan].week === row.week) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
            if (columnIndex === 1) {
                if (rowIndex === 0 || this.cDetailList[rowIndex - 1].vip_rank !== row.vip_rank) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.cDetailList.length && this.cDetailList[rowIndex + rowspan].vip_rank === row.vip_rank) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
            if (columnIndex === 2) {
                if (rowIndex === 0 || this.cDetailList[rowIndex - 1].kh_calss !== row.kh_calss) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.cDetailList.length && this.cDetailList[rowIndex + rowspan].kh_calss === row.kh_calss) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
            if (columnIndex === 3) {
                if (rowIndex === 0 || this.cDetailList[rowIndex - 1].data_user_name !== row.data_user_name) {
                    // 计算连续相同 ID 的行数
                    let rowspan = 1;
                    while (rowIndex + rowspan < this.cDetailList.length && this.cDetailList[rowIndex + rowspan].data_user_name === row.data_user_name) {
                        rowspan++;
                    }
                    return { rowspan, colspan: 1 };
                } else {
                    return { rowspan: 0, colspan: 0 };
                }
            }
        },
        getCustomerDicts(){
            listWeekCustomerDicts().then(res =>{
                this.areaListOption = res.data.areas;
                this.yearsList = res.data.years;
                this.queryParams.area = "all";
                this.queryParams.adtime = res.data.year;
                this.queryParams1.area = "all";
                this.queryParams2.area = "all";
                this.queryParams1.pageNo = 1;
                this.queryParams2.pageNo = 1;
                this.getCustomerSummary();
                this.getIncreaseSummary();
                this.getWeekIncreaseSummary();
                this.getLastWeekCustomers();
                this.getFgBigDeptAndArea();
                this.getFgMonthBigDeptAndArea();
                this.getFgMonthAreaSummary();
                this.getLchxSummary();
                this.getLcmxSummary();
                this.getHxmxSummary();
            })
        },
        showPre1(){
            this.queryParams1.pageNo = this.queryParams1.pageNo-1;
            this.getLcmxSummary();
        },
        showNext1(){
            this.queryParams1.pageNo = this.queryParams1.pageNo+1;
            this.getLcmxSummary();
        },
        showPre2(){
            this.queryParams2.pageNo = this.queryParams2.pageNo-1;
            this.getHxmxSummary();
        },
        showNext2(){
            this.queryParams2.pageNo = this.queryParams2.pageNo+1;
            this.getHxmxSummary();
        },
        getHxmxSummary(){
            listHxmxSummary(this.queryParams2).then(res =>{
                this.hxmxList = res.data.list;
                this.queryParams2.totalPage = res.data.totalPage;
                this.queryParams2.pageNo = res.data.pageNo;
                this.queryParams2.pageSize = res.data.pageSize;
            });
        },
        getLcmxSummary(){
            listLcmxSummary(this.queryParams1).then(res =>{
                this.lcmxList = res.data.list;
                this.queryParams1.totalPage = res.data.totalPage;
                this.queryParams1.pageNo = res.data.pageNo;
                this.queryParams1.pageSize = res.data.pageSize;
            });
        },
        getLchxSummary(){
            listLchxSummary(this.queryParams).then(res =>{
                this.lclvList = res.data.lclv;
                setTimeout(() => {
                    for(let i=0;i<this.lclvList.length;i++){
                        let arr = new Array();
                        arr.push(this.lclvList[i].lclv2025);
                        let labels = new Array();
                        labels.push(this.lclvList[i].owner);
                        let object = document.getElementById("div"+i);
                        const chart = echarts.init(object);
                        const option = {
                            legend: {},
                            xAxis: {
                                type: 'value',
                                axisLine: { show: false },
                                boundaryGap: [0, 0.01]
                            },
                            yAxis: {
                                type: 'category',
                                data: labels,
                            },
                            series: [
                                {
                                    type: 'bar',
                                    data: arr,
                                    itemStyle: {
                                        color: 'orange'
                                    },
                                    label: {
                                        show: true, // 显示标签
                                        position: 'right', // 标签位置
                                        formatter: '{c}%' // 标签内容格式化为数据值
                                    }
                                }
                            ]
                        };
                        chart.setOption(option);
                    }
                }, 2000);
            })
        },
        changeArea(){
            this.getCustomerSummary();
            this.getIncreaseSummary();
            this.getWeekIncreaseSummary();
            this.getLastWeekCustomers();
            this.getFgBigDeptAndArea();
            this.getFgMonthBigDeptAndArea();
            this.getFgMonthAreaSummary();
            this.getLchxSummary();
            this.queryParams1.pageNo = 1;
            this.queryParams2.pageNo = 1;
            this.queryParams1.area = this.queryParams.area;
            this.queryParams2.area = this.queryParams.area;
            this.getLcmxSummary();
            this.getHxmxSummary();
        },
        changeYear(){
            this.getWeekIncreaseSummary();
            this.getFgMonthAreaSummary();
        },
        getFgMonthAreaSummary(){
            listFgMonthAreaSummary(this.queryParams).then(res =>{
                const container = document.getElementById('chart10');
                container.innerHTML = '';
                for(let i=0;i<res.data.length;i++){
                    const div = document.createElement('div');
                    div.id = res.data[i].chart;
                    div.style.width = '100%';
                    div.style.height = '150px';
                    container.appendChild(div);
                    const chart10 = echarts.init(document.getElementById(res.data[i].chart));
                    const option10 = {
                        title: {
                            text: res.data[i].name,
                            textStyle: {
                                fontSize: 12, // 设置标题字体大小
                                fontWeight: 'normal', // 设置字体粗细
                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                return params[0].data.extraInfo
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                magicType: { show: true, type: ['line', 'bar'] },
                                restore: { show: true },
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: res.data[i].labels
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series:{
                            data: res.data[i].data.map(it =>({
                                value: it.kh_rs,
                                name: it.area,
                                extraInfo:"片区: "+it.area+"<br />日期: "+it.DATE+"<br/> 客户数："+it.kh_rs+"<br />下单人数："+it.xd_rs+"<br />月活/下单率："+Number(it.xd_lv).toFixed(2)+"%<br />复购人数："+it.fg_rs+"<br/>复购率："+Number(it.fg_lv).toFixed(2)+"%",
                            })),
                            type: 'line',
                            itemStyle: {
                                color: res.data[i].color
                            }
                        }
                    };
                    chart10.setOption(option10);
                }
            })
        },
        getFgMonthBigDeptAndArea(){
            listFgMonthBigDeptAndArea(this.queryParams).then(res =>{
                const container = document.getElementById('chart9');
                container.innerHTML = '';
                for(let i=0;i<res.data.length;i++){
                    const div = document.createElement('div');
                    div.id = res.data[i].chart;
                    div.style.width = '100%';
                    div.style.height = '150px';
                    container.appendChild(div);
                    const chart9 = echarts.init(document.getElementById(res.data[i].chart));
                    const option9 = {
                        title: {
                            text: res.data[i].name,
                            textStyle: {
                                fontSize: 12, // 设置标题字体大小
                                fontWeight: 'normal', // 设置字体粗细
                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                return params[0].data.extraInfo
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                magicType: { show: true, type: ['line', 'bar'] },
                                restore: { show: true },
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: res.data[i].labels
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series:{
                            data: res.data[i].data.map(it =>({
                                value: it.kh_rs_1,
                                name: it.area_1,
                                extraInfo:"部门: "+it.area_1+"<br />日期: "+it.DATE+"<br/> 客户数："+it.kh_rs_1+"<br />下单人数："+it.xd_rs_1+"<br />月活/下单率："+Number(it.xd_lv_1).toFixed(2)+"%<br />复购人数："+it.fg_rs_1+"<br/>复购率："+Number(it.fg_lv_1).toFixed(2)+"%",
                            })),
                            type: 'line',
                            itemStyle: {
                                color: res.data[i].color
                            }
                        }
                    };
                    chart9.setOption(option9);
                }
            })
        },
        getFgBigDeptAndArea(){
            listFgBigDeptAndArea(this.queryParams).then(res =>{
                const labels7 = [];
                if(res.data.bigDepts.length>0){
                    for(let i=0;i<res.data.bigDepts.length;i++){
                        labels7.push(res.data.bigDepts[i].area_1);
                    }
                }
                const chart7 = echarts.init(this.$refs.chart7);
                const option7 = {
                    title: {
                        text: '电商和销售部-下单/月活/复购率',
                        left: 'center',
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        height: '80%' // 设置内部图形的高度为容器高度的 70%
                    },
                    xAxis: {
                        type: 'category',
                        data: labels7
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data:res.data.bigDepts.map(item => ({
                                value: item.kh_rs_1,
                                name: item.area_1,
                                extraInfo:"部门"+item.area_1+"<br/> 客户数："+item.kh_rs_1+"<br />下单人数："+item.xd_rs_1+"<br />月活/下单率："+Number(item.xd_lv_1).toFixed(2)+"%<br />复购人数："+item.fg_rs_1+"<br/>复购率："+Number(item.fg_lv_1).toFixed(2)+"%",
                            })),
                            type: 'bar',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}' // 标签内容格式化为数据值
                            },
                            itemStyle: {
                            color: function(params) {
                                // 颜色数组
                                const colorList = res.data.bColors;
                                // 根据数据索引返回对应颜色
                                return colorList[params.dataIndex % colorList.length];
                            }
                        },
                        }
                    ]
                };
                chart7.setOption(option7);
                const labels8 = [];
                if(res.data.areas.length>0){
                    for(let i=0;i<res.data.areas.length;i++){
                        labels8.push(res.data.areas[i].area);
                    }
                }
                const chart8 = echarts.init(this.$refs.chart8);
                const option8 = {
                    title: {
                        text: '片区-下单/月活/复购率',
                        left: 'center',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    grid: {
                        height: '80%' // 设置内部图形的高度为容器高度的 70%
                    },
                    legend: {},
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: labels8,
                    },
                    series: [
                        {
                            type: 'bar',
                            data:res.data.areas.map(item => ({
                                value: item.kh_rs,
                                name: item.area,
                                extraInfo:"片区: "+item.area+"<br/> 客户数："+item.kh_rs+"<br />下单人数："+item.xd_rs+"<br />月活/下单率："+Number(item.xd_lv).toFixed(2)+"%<br />复购人数："+item.fg_rs+"<br/>复购率："+Number(item.fg_lv).toFixed(2)+"%",
                            })),
                            itemStyle: {
                                color: function(params) {
                                    // 颜色数组
                                    const colorList = res.data.aColors;
                                    // 根据数据索引返回对应颜色
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            },
                            label: {
                                show: true, // 显示标签
                                position: 'right', // 标签位置
                                formatter: '{c}' // 标签内容格式化为数据值
                            }
                        }
                    ]
                };
                chart8.setOption(option8);
            })
        },
        getLastWeekCustomers(){
            listLastWeekCustomers().then(res =>{
                this.cDetailList = res.data;
            })
        },
        getWeekIncreaseSummary(){
            listWeekIncreaseSummary(this.queryParams).then(res =>{
                const labels = [];
                if(res.data.length>0){
                    for(let i=0;i<res.data.length;i++){
                        labels.push("第"+res.data[i].week+"周");
                    }
                }
                const chart3 = echarts.init(this.$refs.chart3);
                const option3 = {
                    title: {
                        text: '一般',
                        left: 'left',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            var result = '类型：一般<br/>';
                            result += '周数：第'+params[0].name + '周<br />';
                            result += '新增：'+params[0].value + '个<br />';
                            return result;
                        }
                    },
                    grid: {
                        height: '50%' // 设置内部图形的高度为容器高度的 70%
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labels,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.map(item => ({
                                value: item.ybkhzs,
                                name: item.week,
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}' // 标签内容格式化为数据值
                            },
                            lineStyle: {
                                color: 'orange' // 红色线条
                            }
                        }
                    ]
                };
                chart3.setOption(option3);

                const chart4 = echarts.init(this.$refs.chart4);
                const option4 = {
                    title: {
                        text: 'V+',
                        left: 'left',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            var result = '类型: V+<br/>';
                            result += '周数：第'+params[0].name + '周<br />';
                            result += '新增：'+params[0].value + '个<br />';
                            return result;
                        }
                    },
                    grid: {
                        height: '50%' // 设置内部图形的高度为容器高度的 70%
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labels,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.map(item => ({
                                value: item.vjzs,
                                name: item.week,
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}' // 标签内容格式化为数据值
                            },
                            lineStyle: {
                                color: 'green' // 红色线条
                            }
                        }
                    ]
                };
                chart4.setOption(option4);

                const chart5 = echarts.init(this.$refs.chart5);
                const option5 = {
                    title: {
                        text: 'V0',
                        left: 'left',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            var result = '类型: v0<br/>';
                            result += '周数：第'+params[0].name + '周<br />';
                            result += '新增：'+params[0].value + '个<br />';
                            return result;
                        }
                    },
                    grid: {
                        height: '50%' // 设置内部图形的高度为容器高度的 70%
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labels,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.map(item => ({
                                value: item.vlzs,
                                name: item.week,
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}' // 标签内容格式化为数据值
                            },
                            lineStyle: {
                                color: 'purple' // 红色线条
                            }
                        }
                    ]
                };
                chart5.setOption(option5);

                const chart6 = echarts.init(this.$refs.chart6);
                const option6 = {
                    title: {
                        text: '总和',
                        left: 'left',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            var result = '类型: 总和<br/>';
                            result += '周数：第'+params[0].name + '周<br />';
                            result += '新增：'+params[0].value + '个<br />';
                            return result;
                        }
                    },
                    grid: {
                        height: '50%' // 设置内部图形的高度为容器高度的 70%
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labels,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.map(item => ({
                                value: item.sum,
                                name: item.week,
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}' // 标签内容格式化为数据值
                            },
                            lineStyle: {
                                color: 'red' // 红色线条
                            }
                        }
                    ]
                };
                chart6.setOption(option6);
            })
        },
        getIncreaseSummary(){
            listIncreaseSummary(this.queryParams).then(res =>{
                this.khList = res.data.khList;
                this.areaList = res.data.areaList;
                this.areaSummaryList = res.data.areaSummaryList;
                this.khSummaryList = res.data.khSummaryList;
                const that = this;
                const chart1 = echarts.init(this.$refs.chart1);
                const option1 = {
                  tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                  },
                  toolbox: {
                    feature: {
                      saveAsImage: {}
                    }
                  },
                  series: [
                    {
                      name: '客户类型占比',
                      type: 'pie',
                      // data: res.data.datas,
                      data: res.data.khSummaryList.map((item, index) => ({
                        ...item,
                      })),
                    }
                  ]
                };
                chart1.setOption(option1);
                chart1.on('click', function(params) {
                  if (params.componentType === 'series') {
                    that.queryParams.area = params.name;
                    chart1.dispatchAction({
                      type: 'downplay',
                      seriesIndex: [0]
                    });

                    // 高亮选中的柱子
                    chart1.dispatchAction({
                      type: 'highlight',
                      seriesIndex: [0],
                      dataIndex: params.dataIndex
                    });
                    var newData = res.data.khSummaryList.map((value, index) => {
                      var item = {
                        value: value.value,
                        name: value.name,
                        itemStyle: {
                          opacity: 1,
                        }
                      };
                      // 非选中的柱子设置透明度
                      if (index !== params.dataIndex) {
                        item.itemStyle.opacity = 0.2;
                      }
                      return item;
                    });

                    chart1.setOption({
                      series: [{
                        data: newData
                      }]
                    });

                    that.getCustomerSummary();
                    that.getKhListSummary();
                    that.getAreaListSummary();
                    that.getAreaSummaryData();
                    that.getWeekIncreaseSummary();
                  }
                });
                chart1.getZr().on('click', function(event) {
                  if (!event.target) {
                    that.queryParams.area = 'all';
                    var newData = res.data.khSummaryList.map((value, index) => ({
                      value: value.value,
                      name: value.name,
                    }));

                    chart1.setOption({
                      series: [{
                        data: newData
                      }]
                    });
                    // 取消所有高亮
                    chart1.dispatchAction({
                      type: 'downplay',
                      seriesIndex: [0]
                    });

                    that.getCustomerSummary();
                    that.getKhListSummary();
                    that.getAreaListSummary();
                    that.getAreaSummaryData();
                    that.getWeekIncreaseSummary();
                  }
                });

                const chart2 = echarts.init(this.$refs.chart2);
                const option2 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '客户片区占比',
                            type: 'pie',
                            // data: res.data.datas,
                            data: res.data.areaSummaryList.map(item => ({
                                value: item.amount,
                                name: item.area,
                            })),
                        }
                    ]
                };
                chart2.setOption(option2);
            })
        },
        getCustomerSummary(){
            listCustomerSummary(this.queryParams).then(res =>{
              this.cusSummary = res.data;
            })
        },
        getKhListSummary(){
          listKhListSummary(this.queryParams).then(res =>{
            this.khList = res.data.khList;
          })
        },
        getAreaListSummary(){
          listAreaListSummary(this.queryParams).then(res =>{
            this.areaList = res.data.areaList;
          })
        },
        getAreaSummaryData(){
          listAreaSummaryData(this.queryParams).then(res =>{
            const chart2 = echarts.init(this.$refs.chart2);
            const option2 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '客户片区占比',
                        type: 'pie',
                        data: res.data.areaSummaryList.map(item => ({
                            value: item.amount,
                            name: item.area,
                        })),
                    }
                ]
            };
            chart2.setOption(option2);
          })
        }
    }
}


</script>
